<!--
 * @Author: wangjianwhy wangjianwhy@sina.com
 * @Date: 2024-10-28 08:44:22
 * @LastEditors: wangjianwhy wangjianwhy@sina.com
 * @LastEditTime: 2024-12-09 11:26:49
 * @FilePath: \my-vue3-appg:\vscode-work\tlo-shopping\src\components\product\ShoppingCar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="shopping-car">
        <!--头部地址或编辑-->
        <div class="scar-head">
            <div class="head-cancel">
                <span class="car-cancel" @click="router.back">❮</span>
                <span class="car-title">购物车</span>
                <span class="car-edit" v-if="!isEdit" @click="editShop">编辑</span>
                <span class="car-edit" v-if="isEdit" @click="delShop">删除</span>
            </div>
            <div class="head-address">
                <img src="/public/images/address-point.svg" />
                <span @click="changeAddress">广东 广州 番禺 东环街道 ❯</span>
            </div>
        </div>

        <!--商品列表清单-->
        <div class="shop-list" v-if="lists && lists.length">
            <div class="detail-list" v-for="(ls, index) in lists" :key="index">
                <div class="check">
                    <input type="checkbox" v-model="ls.checked" />
                </div>
                <div class="pic">
                    <img :src="ls.shopImg" />
                </div>
                <div class="content">
                    <div class="title">{{ truncateText(ls.shopTitle, 30) }}</div>
                    <div class="price-count">
                        <span class="price">
                            <PriceDisplay :price="ls.price" />
                        </span>
                        <span class="count">
                            <label style="color: #666666;" @click="reduceCount(ls)">–</label>
                            <button @click="addCount(ls)">{{ ls.shopCount }}</button>
                            <label @click="addCount(ls)">+</label>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!--商品结算或删除-->
        <div class="foot-balance">
            <div class="width-90">
                <div class="all-checked">
                    <input type="checkbox" id="check-all" v-model="selectAll" @change="toggleSelectAll" />
                    <label @click="allChecked">全选</label>
                </div>
                <div class="balance">
                    <div class="btn">
                        <button class="bal" v-if="!isEdit" @click="balance">结算({{selectedCount}})</button>
                        <button class="del" v-if="isEdit">删除</button>
                    </div>
                    <div class="bal-price" v-if="!isEdit">
                        <label>合计：
                            <PriceDisplay :price="totalSelectedPrice" />
                        </label>
                        <label style="font-size: 12px; color: #666666;">不含运费</label>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <MessageConfirm :show="isConfirmVisible" :message="confirmMessage" @update:show="isConfirmVisible = $event" @confirm="handleConfirm" @cancel="handleCancel" />
</template>

<script setup>
import PriceDisplay from './PriceDisplay.vue';
import { useRoute, useRouter } from 'vue-router';
import { ref, watch, computed } from 'vue';
import { truncateText } from '../util/tools.js';
import MessageConfirm from '@/components/MessageConfirm.vue';

const route = useRoute();
const router = useRouter();

//是否编辑
const isEdit = ref(false);

const lists = ref([
    {
        id: 1,
        shopCount: 1,
        shopTitle: '什么玩意啊？这里最多能输入多少字呢？好像不能三行，最多两行字，宽度一定要设置好，超过了，就用点点点代替吧',
        price: 1033.04,
        shopImg: '/src/assets/lunbo/image3.jpeg',
        checked: true
    },{
        id: 2,
        shopCount: 1,
        shopTitle: '什么玩意啊？这里最多能输入多少字呢？好像不能三行，最多两行字，宽度一定要设置好，超过了，就用点点点代替吧',
        price: 133.14,
        shopImg: '/src/assets/lunbo/image3.jpeg',
        checked: true
    },{
        id: 3,
        shopCount: 1,
        shopTitle: '什么玩意啊？这里最多能输入多少字呢？好像不能三行，最多两行字，宽度一定要设置好，超过了，就用点点点代替吧',
        price: 233.24,
        shopImg: '/src/assets/lunbo/image3.jpeg',
        checked: true
    },{
        id: 4,
        shopCount: 1,
        shopTitle: '什么玩意啊？这里最多能输入多少字呢？好像不能三行，最多两行字，宽度一定要设置好，超过了，就用点点点代替吧',
        price: 333.34,
        shopImg: '/src/assets/lunbo/image3.jpeg',
        checked: true
    },{
        id: 5,
        shopCount: 1,
        shopTitle: '什么玩意啊？这里最多能输入多少字呢？好像不能三行，最多两行字，宽度一定要设置好，超过了，就用点点点代替吧',
        price: 433.44,
        shopImg: '/src/assets/lunbo/image3.jpeg',
        checked: true
    }
]);


const selectAll = ref(false);

const addCount = (shop) => {
    shop.shopCount++;
}

const deleteOne = ref(-1);
const reduceCount = (shop) => {
    if(shop.shopCount == 1) {
        isConfirmVisible.value = true;
        deleteOne.value = shop.id;
        return;
    }
    shop.shopCount--;
}

// 单个商品选择变化时，检查是否全选
watch(
    lists,
    () => {
        selectAll.value = lists.value.every((item) => item.checked);
    },
    { deep: true }
);

// 全选切换
const toggleSelectAll = () => {
    lists.value.forEach((item) => {
        item.checked = selectAll.value;
    });
};

const isConfirmVisible = ref(false);
const confirmMessage = ref('您确定要删除吗？');

const handleConfirm = () => {
    // 处理确认逻辑，发起请求购物车里的商品
    const index = lists.value.findIndex(item => item.id === deleteOne.value);
    if (index !== -1) {
        lists.value.splice(index, 1);
    }
};
// 处理取消逻辑，什么都不做
const handleCancel = () => {};

const changeAddress = () => {
    alert("改变地址？");
    console.log(route.params);
}

const editShop = () => {
    alert("编辑商品？");

    isEdit.value = true;
}

const delShop = () => {
    alert("删除商品？");

    isEdit.value = false;
}

const allChecked = () => {
    selectAll.value = !selectAll.value;
    lists.value.forEach(item => {
        item.checked = selectAll.value;
    });
}

// 计算属性：计算选中商品的总金额
const totalSelectedPrice = computed(() => {
    return lists.value
        .filter(item => item.checked)
        .reduce((total, item) => total + item.price * item.shopCount, 0);
});

// 计算属性：获取选中数量
const selectedCount = computed(() => {
    return lists.value.filter(item => item.checked).length;
});

//默认是否选中全选状态
function initSelectAll() {
        // 当设置selectAll为true或false时，更新所有items的checked状态
    lists.value.forEach(item => {
        if (item.checked) {
            selectAll.value = true;
        } else {
            selectAll.value = false;
            return;
        }
    })
}
initSelectAll();

//结算
const balance = () => {
    //提交数据库变更状态
    router.push({name: 'balance'});
}
</script>

<style scoped>
.shopping-car {
    width: 100%;
}
.shopping-car .width-90 {
    width: 95%;
    margin: 10px 0px;
    margin: auto;
}
.shopping-car .scar-head {
    height: 80px;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    position: fixed;
}
/*头部：地址，编辑，返回*/
.scar-head .head-cancel {
    padding-top: 10px;
    width: 95%;
    height: 45px;
    margin: auto;
}
.head-cancel .car-cancel {
    width: 20px;
    font-size: 16px;
    float: left;
    font-weight: bold;
    cursor: pointer;
}
.head-cancel .car-title {
    font-size: 18px;
    font-weight: bold;
}
.head-cancel .car-edit {
    font-size: 14px;
    float: right;
    cursor: pointer;
}
/*地址*/
.scar-head .head-address {
    width: 95%;
    margin: auto;
    font-size: 14px;
    display: flex;
}
.head-address img {
    height: 20px;
    margin: auto;
    margin-right: 0px;
}
.head-address span {
    height: 20px;
    margin: auto;
    margin-left: 0px;
}


/*已加入购物车的清单*/
.shop-list {
    width: 95%;
    margin: auto;
    margin-top: 90px;
    margin-bottom: 60px;
}
.shop-list .detail-list {
    width: 100%;
    margin: 10px auto;
    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
}

.detail-list .check {
    height: 40px;
    margin: auto;
    box-sizing: border-box;
    flex: 0;
}

.detail-list .pic {
    padding: 10px;
    margin: auto;
    box-sizing: border-box;
    flex: 0;
}
.detail-list .pic img {
    height: 10vh;
    width: 10vh;
    border-radius: 8px;
}


.detail-list .content {
    flex: 1;
    box-sizing: border-box;
}

.content .title {
    font-size: 14px;
    height: 50px;
    padding: 10px 0px;
    text-align: left;
}
.content .count {
    height: auto;
    box-sizing: border-box;
    float: right;
    margin-right: 15px;
}

.price-count .price {
    float: left;
    height: 30px;
}

.count button {
    height: 16px;
    background-color: #cccccc;
    box-sizing: border-box;
    font-size: 12px;
    padding: 0px 10px;
    margin: auto 5px;
    border-radius: 5px;
}
.count label {
    font-weight: bold;
    font-size: 20px;
    box-sizing: border-box;
    margin: auto 8px;
    height: 10px;
}


/*底部结算*/
.foot-balance {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    width: 100%;
    margin: auto;
    padding: 5px 0px;
    background-color: white;
}
.foot-balance .all-checked {
    font-size: 16px;
    float: left;
}

.all-checked label {
    margin: 7px auto;
    float: left;
}
/*选中*/
/* 设置复选框样式 */
input[type="checkbox"] {
    appearance: none; /* 移除默认外观 */
    -webkit-appearance: none; /* 移除Webkit浏览器的默认外观 */
    -moz-appearance: none; /* 移除Mozilla浏览器的默认外观 */
    border: 2px solid #555; /* 设置边框样式 */
    height: 15px; /* 设置高度 */
    width: 15px; /* 设置宽度 */
    border-radius: 10px; /* 设置圆角 */
    outline: none; /* 移除聚焦时的轮廓线 */
    margin: 12px 10px;
    float: left;
}

  /* 设置选中时的复选框样式 */
input[type="checkbox"]:checked {
    background-color: #2196F3; /* 设置选中时的背景颜色 */
    border: 0px solid #2196F3; /* 设置选中时的边框颜色 */
}

/* 创建自定义的勾选标记 */
input[type="checkbox"]:checked::after {
    content: "✔"; /* 必须有内容，即使是空字符串 */
    position: absolute; /* 定位伪元素 */
    color: white;
    padding: 0px 5px 0px 2px;
    border: solid white; /* 边框颜色 */
    border-width: 0 0px 0px 0; /* 边框宽度，只设置右边和底部 */
    transform: rotate(14deg); /* 旋转45度形成勾选标记 */
}

/* 结算 */
.balance {
    height: 40px;
    width: auto;
}
.balance .bal-price {
    width: auto;
    margin: auto;
    float: right;
    font-size: 18px;
    width: auto;
    text-align: right;
}
.bal-price label {
    height: 19px;
    display: flex;
    margin: 0px 10px;
    margin-bottom: 5px;
    width: 100%;
    text-align: right;
}
.balance .btn {
    height: 90%;
    width: auto;
    margin: auto;
    float: right;
}
.btn .bal {
    height: 90%;
    background-color: #2196F3;
    border-radius: 15px;
    color: white;
    font-weight: bold;
    margin-top: 5%;
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
}
.btn .del {
    height: 90%;
    background-color: red;
    border-radius: 15px;
    color: white;
    font-weight: bold;
    margin-top: 5%;
    padding: 0px;
    padding-left: 15px;
    padding-right: 15px;
}
</style>